<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<div id="app">
    <label for="firstName">firstName：</label>
    <input type="text" v-model.lazy="firstName" id="firstName">
    <label for="lastName">lastName：</label>
    <input type="text" v-model="lastName" id="lastName">

    <br>

    <h2>全名是：{{fullName}}</h2>
</div>

<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            firstName:'',
            lastName: '',
            fullName: ''
        },
        watch: {
            //属性监听的标准语法格式
            firstName: {
                handler(newVal,oldVal){//这两个参数可以省略，监听属性变化之前与之后的值
                    console.log(newVal+"--------"+oldVal)
                    this.fullName = this.firstName + " " + this.lastName
                }
            },
            //属性监听的简写语法格式
            lastName: function(){
                this.fullName = this.firstName + " " + this.lastName
            }
        }
    });


</script>

</body>
</html>